<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
	<style type="text/css">
	.visiable{
		background: #e8e8e8;
		cursor: pointer;
		color: #333;
	}
	.visiable:HOVER {
	background: #aeaeae;
}
	
	</style>
	
</head>
<body>
	<div class="ibox-content" id="warp">
		<form class="form-horizontal" id="dataform"
			onsubmit="javascripr:return false;">
			<input type="hidden" name="caseId" value="${obj.caseId }">
			<div class="panel panel-default">
				<!-- Default panel contents -->
				<div class="panel-heading">
					<span class="label label-primary">${obj.caseNo }</span> ${obj.title }>
					执行
				</div>
				<div class="panel-body">
					<p>前置条件 ${obj.beforCondition }</p>
				</div>
				<table class="table table-bordered text-center">
					<thead>
						<tr>
							<th>编号</th>
							<th>步骤</th>
							<th>预期</th>
							<th>测试结果</th>
							<th>实际情况</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in steps" :key="item.stepNo">
							<td>{{item.stepNo}} <input type="hidden"
								:name="'stepsNoHistory['+item.stepNo+'].stepNo'"
								:value="item.stepNo">
							</td>
							<td><textarea rows="3" class="form-control"
									:name="'stepsNoHistory['+item.stepNo+'].title'"
									v-model="item.title"></textarea></td>
							<td><textarea rows="3" class="form-control"
									:name="'stepsNoHistory['+item.stepNo+'].expectation'"
									v-model="item.expectation"></textarea></td>
							<td><select :name="'stepsNoHistory['+item.stepNo+'].result'"
								class="form-control">
									<option value="通过">通过</option>
									<option value="N/A">N/A</option>
									<option value="失败">失败</option>
									<option value="阻塞">阻塞</option>
							</select></td>
							<td><textarea rows="3" class="form-control" maxlength="500"
									:name="'stepsNoHistory['+item.stepNo+'].actually'"></textarea></td>
						</tr>
					</tbody>
				</table>
				<div class="panel-footer text-center">
					<a href="javascript:;" onclick="myForm.submit()"
						class="btn btn-success radius"><i class="fa fa-check"></i> 保存</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a class="btn btn-danger radius" href="javascript:;"
						onclick="MTools.closeForm()"><i class="fa fa-close"></i> 关闭</a>
				</div>
				<div class="panel-body">

					<table class="table ">
						<thead>
							<tr>
								<th colspan="100" style="background: #f8f8f8;" >测试结果 共执行${obj.success+obj.fail }次 成功${obj.success}
									失败${obj.fail }</th>
							</tr>
						</thead>
						<tbody v-for="(list, index) in historySteps" id="historyBody" >
						<tr  class="visiable" v-on:click="show(index)" >
								<td>&#35;{{list[0].historyNo}}</td>
								<td> {{list[0].exeTime | getYear}}</td>
								<td> {{list[0].exeUser}} 执行</td>
								<td> {{list[0].historyResult}}<i class="fa fa-chevron-down"></i></td>
						</tr>
							<tr  style="display: none" >
								<td colspan="100" style="margin: 0;padding: 0;">
									<table class="table" style="margin: 0;padding: 0;">
										<thead>
											<tr   style="background: #f5f5f6;">
												<th>编号</th>
												<th>步骤</th>
												<th>预期</th>
												<th>测试结果</th>
												<th>实际情况</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="item in list" >
												<td>{{item.stepNo}}
												</td>
												<td>{{item.title}}</td>
												<td>{{item.expectation}}</td>
												<td>{{item.result}}</td>
												<td>{{item.actually}}</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</form>
	</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var steps=[{stepNo:1,title:'',expectation:''}];
<c:if test="${obj ne null }">
steps=[];
<c:forEach var="item" items="${obj.stepsNoHistory }" >
	var step={stepNo:${item.stepNo},title:"${item.title}",expectation:"${item.expectation}" };
	steps.push(step);
</c:forEach>
</c:if>

console.log(steps);


var app=new Vue({
	el:"#warp",
	data: {
	    steps: steps,
	    historySteps:{}
	  },
	  methods:{
		  show: function (index){
			  console.log(2*index+1);
			 $("#historyBody > tr").eq(2*index+1).toggle();
		 },
		 
	  },
	  filters:{
		  getYear : function(value) {
				var data = new Date(value);
				return data.getFullYear() + "-"
						+ (data.getMonth() + 1)+ "-"+data.getDate()+" "+data.getHours()+":"+(data.getMinutes()<10?"0"+data.getMinutes():data.getMinutes());
			}
	  }
});
	$(".select2").select2({
		'width' : '100%'
	});
	var myForm = MForm.initForm({
		invokeUrl : "${path}/admin/userCase/doExeCase",
		afterSubmit : function() {
			parent.myGrid.serchData();
		},
	});
	
	//加载历史步骤
	$.AjaxProxy().invoke("${path}/admin/userCase/showHistoryList?caseId=${obj.caseId}",function(loj){
		app.historySteps=loj.getValue("rows");
	});

	
	
	
	
	
	
	
</script>
</body>
</html>